<template>
  <!-- <div class="content">
    <el-card class="card"> -->
  <LayoutContent>
    <div class="button">
      <div class="detail">编辑</div>
      <div>
        <el-button type="primary" @click="clickHandle('save')">保存</el-button>
        <el-button type="primary" @click="clickHandle('rest')">重置</el-button>
        <el-button @click="clickHandle('back')">返回</el-button>
      </div>
    </div>
    <div class="form">
      <el-form ref="formInstall" :model="form" status-icon :rules="rules" label-position="left" label-width="auto">
        <el-form-item label="考试名称:" prop="name">
          <el-input v-model.trim="form.name" placeholder="请输入分数" />
        </el-form-item>
        <el-form-item label="姓名:" prop="stuId">
          <el-select v-model="form.stuId" filterable placeholder="请选择姓名">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in studentList" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="分数:" prop="score">
          <el-input v-model.trim="form.score" placeholder="请输入分数" />
        </el-form-item>
        <el-form-item label="年级:" prop="grade">
          <el-select v-model="form.grade" filterable placeholder="请选择年级">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in gradeList" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="学期:" prop="term">
          <el-select v-model="form.term" filterable placeholder="请选择学期">
            <el-option label="上学期" :value="1" :key="index" />
            <el-option label="下学期" :value="2" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="课程:" prop="courceId">
          <el-select v-model="form.courceId" clearable filterable placeholder="请选择课程" @change="changeHandle">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in courseList" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="教师:" prop="teaId">
          <el-select v-model="form.teaId" :disabled="isTea" filterable placeholder="请选择教师">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in teacherList" :key="index" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </LayoutContent>
  <!-- </el-card>
  </div> -->
</template>

<script setup>
import { onMounted, ref, reactive, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getDetailApi, addApi, getTeacherListApi, getCourseListApi, getStudentListApi } from '@/api/score/index'
import useUserStore from '@/store/user'
const user = useUserStore()

const isTea = inject('isTea')
const route = useRoute()
const router = useRouter()

const form = ref({
  name: '',
  stuId: '',
  score: '',
  courceId: '',
  teaId: '',
})
const getDetail = async () => {
  const res = await getDetailApi({ id: route.query.id })
  if (res.code == 200) {
    form.value = res.data
    ElMessage.success(res.msg)
  } else {
    ElMessage.error(res.msg)
  }
}

const gradeList = [
  {
    id: 1,
    name: '大一',
  },
  {
    id: 2,
    name: '大二',
  },
  {
    id: 3,
    name: '大三',
  },
  {
    id: 4,
    name: '大四',
  },
]

const changeHandle = () => {
  if (form.value.courceId) {
    getTeacherList()
  }
  form.value.teaId = ''
}

const teacherList = ref([])
const getTeacherList = async () => {
  const res = await getTeacherListApi({ courceId: form.value.courceId })
  if (res.code == 200) {
    teacherList.value = res.data
  } else {
    ElMessage.error('获取教师列表数据失败')
  }
}
const courseList = ref([])
const getCourseList = async () => {
  const res = await getCourseListApi()
  if (res.code == 200) {
    courseList.value = res.data
  } else {
    ElMessage.error('获取课程列表数据失败')
  }
}
const studentList = ref([])
const getStudentList = async () => {
  const res = await getStudentListApi()
  if (res.code == 200) {
    studentList.value = res.data
  } else {
    ElMessage.error('获取学生列表数据失败')
  }
}

onMounted(() => {
  if (route.query.id) {
    getDetail()
  }
  if (isTea.value) {
    form.value.teaId = user.user.id
  }
  getTeacherList()
  getCourseList()
  getStudentList()
})

const formInstall = ref(null)

const rules = reactive({
  name: [{ required: true, message: '请输入考试名称', trigger: 'blur' }],
  stuId: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  courceId: [{ required: true, message: '请选择课程', trigger: 'blur' }],
  teaId: [{ required: true, message: '请选择教师', trigger: 'blur' }],
  term: [{ required: true, message: '请选择学期', trigger: 'blur' }],
  grade: [{ required: true, message: '请选择年级', trigger: 'blur' }],
})

const submit = async () => {
  if (!formInstall.value) return
  formInstall.value.validate(async (valid) => {
    if (valid) {
      const res = await addApi(form.value)
      if (res.code == 200) {
        ElMessage.success(res.msg)
        router.back()
      } else {
        ElMessage.error(res.msg)
      }
    }
  })
}

const clickHandle = (type) => {
  switch (type) {
    case 'back':
      router.back()
      break
    case 'save':
      submit()
      break
    case 'rest':
      formInstall.value.resetFields()
      break
  }
}
</script>

<style scoped lang="scss">
.content {
  .card {
    height: 100%;

    .button {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 2px solid #eee;
    }
    .form {
      margin-top: 10px;
    }
  }
}
</style>
